<script setup lang="ts">
import { PlusDialogForm } from "plus-pro-components";
import { useRiskRulesPage } from "./index";

defineOptions({ name: "RiskRules" });

const {
  // header
  searchQuery,
  openNew,
  openEdit,
  openCopy,
  handleDelete,
  isRowSelected,

  // table
  tableColumns,
  tableSize,
  filteredData,
  onCurrentChange,
  onRowClick,

  // dialog/form
  dialogVisible,
  dialogProps,
  dialogFormProps,
  dialogModel,
  handleConfirm,
  handleConfirmError,
  closeDialog,

  // template meta
  selectedTemplateDoc,
  selectedTemplateSchema,
  selectedTemplateRequired
} = useRiskRulesPage();
</script>
<template>
  <div class="">
    <div
      class="bg-bg_color mb-1 flex flex-col items-end gap-2 p-1 sm:mb-2 sm:p-2 md:flex-row md:items-center md:justify-between md:p-3"
    >
      <el-input
        v-model="searchQuery"
        placeholder="搜索规则名称"
        class="md:max-w-sm"
        clearable
      />
      <div class="flex gap-1 md:gap-2">
        <el-button :size="tableSize" type="primary" @click="openNew"
          >新建</el-button
        >
        <el-button
          :size="tableSize"
          type="success"
          :disabled="!isRowSelected"
          @click="openEdit"
          >编辑</el-button
        >
        <el-button
          :size="tableSize"
          type="warning"
          :disabled="!isRowSelected"
          @click="openCopy"
          >复制</el-button
        >
        <el-button
          :size="tableSize"
          type="danger"
          :disabled="!isRowSelected"
          @click="handleDelete"
          >删除</el-button
        >
      </div>
    </div>
    <div class="bg-bg_color mt-1 p-1 sm:mt-2 sm:p-2 md:p-3">
      <pure-table
        :size="tableSize"
        :data="filteredData"
        :columns="tableColumns"
        row-key="name"
        :border="true"
        :highlight-current-row="true"
        @current-change="onCurrentChange"
        @row-click="onRowClick"
        @row-dblclick="
          row => {
            onCurrentChange(row);
            openEdit();
          }
        "
      />

      <PlusDialogForm
        v-model:visible="dialogVisible"
        v-model="dialogModel"
        :dialog="dialogProps"
        :form="dialogFormProps"
        @confirm="handleConfirm"
        @confirm-error="handleConfirmError"
        @close="closeDialog"
      >
        <template #dialog-header>
          <div>
            <div class="mb-2 font-semibold tracking-wide">编辑规则</div>
            <div v-if="selectedTemplateDoc" class="mb-4">
              <div
                class="border-info bg-info-light rounded border px-3 py-2 shadow-sm"
              >
                <div
                  class="text-info font-mono text-xs leading-5 whitespace-pre-wrap"
                  v-html="selectedTemplateDoc"
                />
              </div>
            </div>
          </div>
        </template>
        <template #plus-field-arguments>
          <div class="w-full">
            <div
              v-if="Object.keys(selectedTemplateSchema).length === 0"
              class="text-gray-400"
            >
              请先选择模板以配置参数
            </div>
            <div v-else class="grid gap-4 border-t pt-4 md:grid-cols-2">
              <div
                v-for="(schema, key) in selectedTemplateSchema"
                :key="key"
                class="flex flex-col gap-1"
              >
                <div class="flex items-center gap-1">
                  <span class="text-sm font-medium text-gray-700">
                    {{ schema.title || key }}
                  </span>
                  <span
                    v-if="selectedTemplateRequired.includes(key)"
                    class="text-red-500"
                    >*</span
                  >
                </div>
                <el-input-number
                  v-if="schema.type === 'number' || schema.type === 'integer'"
                  v-model="dialogModel.arguments[key]"
                  :placeholder="String(schema.title || key)"
                  class="!w-full"
                  controls-position="right"
                  :size="tableSize"
                />
                <el-switch
                  v-else-if="schema.type === 'boolean'"
                  v-model="dialogModel.arguments[key]"
                  :size="tableSize"
                />
                <el-input
                  v-else
                  v-model="dialogModel.arguments[key]"
                  :placeholder="String(schema.title || key)"
                  clearable
                  :size="tableSize"
                />
              </div>
            </div>
          </div>
        </template>
      </PlusDialogForm>
    </div>
  </div>
</template>
